import React from "react";
import LearnContext2 from "./learn-context2";
import MyContext from "./context";
import LearnContext4 from "./learn-context4";

/**
 * 使用createContext方法创建一个context对象
 * 用于下发
 */
// export const MyContext = React.createContext();

export default class LearnContext extends React.Component {
  state = {
    childMsg: null,
  };

  childHandle(data) {
    console.log(data, "接收到孙子传来的消息");
  }

  childHandle2 = (childMsg) => {
    this.setState({
      childMsg,
    });
  }

  render() {
    return (
      <div>
        <div>爷爷</div>
        {/* 
          使用context对象里面的Provider组件
          对要下发的组件进行包裹

          我们可以使用value 属性统一进行值的下发

        */}
        <MyContext.Provider
          value={{
            msg: "孙子好",
            onHandle: this.childHandle,
            onChildHandle: this.childHandle2,
            childMsg: this.state.childMsg,
          }}
        >
          <LearnContext2></LearnContext2>
          <LearnContext4></LearnContext4>
        </MyContext.Provider>
      </div>
    );
  }
}
